<template>
    <div id="more">
      <div id="top">
        <div id="topBar">
          <router-link :to="{path:'/rankingList'}"><van-icon name="arrow-left" style="float: left;margin-top: 0.5rem;margin-left: 0.5rem"/>
            <p style="float: left">排行榜</p></router-link>
        </div>
      </div>
      <div id="mid">
        <ul id="rank">
          <li><img src="../assets/first.png" height="200" width="200"/>
            <p class="name">用户12345</p>
            <p class="points">7803</p>
          </li>
          <li><img src="../assets/second.png" height="200" width="200"/>
            <p class="name">用户12345</p>
            <p class="points">7803</p>
          </li>
          <li><img src="../assets/third.png" height="200" width="200"/>
            <p class="name">用户12345</p>
            <p class="points">7803</p>
          </li>
        </ul>
        <van-list id="list"
          v-model="loading"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
          offset="10"
        >
         <div v-for="item in list">
           <p class="rank">{{item}}</p>
           <p class="nameSec">{{item}}</p>
           <p class="points">{{item}}</p></div>
        </van-list>
      </div>
      <div id="foot">
        <div id="self">
          <p style="width: 100%;text-align: left;font-size: 0.9rem;color: #39a9ed">本周排名</p>
          <div style="margin-top: -0.5rem;">第
            <p style="display:inline-block;color: #39a9ed;font-size: 2.5rem;height: 100%;line-height: 2.5rem">{{num}}</p>
            名
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "more",
      data() {
        return {
          list: [],
          error: false,
          loading: false,
          finished:false,
          num:500,
        };
      },
      methods: {
        onLoad() {
          setTimeout(() => {
            for (let i = 0; i < 12; i++) {
              this.list.push(this.list.length + 1);
            }
            // 加载状态结束
            this.loading = false;

            // 数据全部加载完成
            if (this.list.length >= 40) {
              this.finished = true;
            }
          }, 1000);
          fetchSomeThing().catch(() => {
            this.error = true;
          })
        }
      }
    }
</script>

<style scoped>
  #more{
    position: fixed;
    height: 100%;
    width: 100%;
  }
  #top{
    width: 100%;
    height:4.5rem;
    background: red;
    overflow: hidden;
    position: relative;
  }
  #topBar{
    height: 2rem;
    width: 100%;
    line-height: 2rem;
    background: papayawhip;
    color:black;
    font-size: 1rem;
    margin-top: 1rem;
  }
  #topBar p{
    display: inline-block;
  }
  #mid{
    width: calc(100% - 1rem);
    box-sizing: border-box;
    border: 0.1rem #39a9ed solid;
    margin: 0 0.5rem;
    overflow-y: scroll;
    position: fixed;
    bottom: 4rem;
    top:4.5rem;
  }
  #rank>li{
    height: 4rem;
    width: 100%;
    background: #42b983;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
  }
  #rank>li>img{
    width: 3rem;
    height: 100%;
    background: #39a9ed;
    display: inline-block;
    float: left;
  }
  #rank>li p{
    display: inline-block;
    line-height: 3rem;
  }
  #list{
   height: 100%;
  }
  #list>div{
    height: 2rem;
    width: 100%;
    background: #42b983;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
  }
  #list>div p{
    display: inline-block;
    line-height: 1rem;
  }
  .rank{
    font-size: 1.2rem;
    float: left;
    margin-left: 1rem;
    text-align: center;
  }
  .name{
    font-size: 1.2rem;
    float: left;
    margin-left: 1rem;
  }
  .nameSec{
    font-size: 1rem;
    /*float: left;*/
    /*margin-right:2.4rem;*/
  }
  .points{
    font-size: 0.9rem;
    float: right;
  }

  #self{
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 4rem;
    border: #39a9ed solid 0.1rem;
    border-bottom: none;
    padding: 0.3rem 0.5rem;
    box-sizing: border-box;
    z-index: 999;
    background: white;
  }
</style>
